<?php
require_once(dirname(__FILE__) . '/inc/config.inc.php');
IsModelPriv('goodsorder');


?>

<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no"/>
    <title> 运行概况</title>

    <link href="templates/style/admin.css" rel="stylesheet" type="text/css"/>
    <script type="text/javascript" src="templates/js/jquery.min.js"></script>
    <script type="text/javascript" src="templates/js/listajax.js"></script>
    <script type="text/javascript" src="templates/js/forms.func.js"></script>
    <script type="text/javascript" src="templates/js/loadimage.js"></script>
    <script type="text/javascript" src="templates/js/getarea.js"></script>
    <script type="text/javascript" src="layer/layer.js"></script>
    <!-- 最新版本的 Bootstrap 核心 CSS 文件 -->
    <link rel="stylesheet" href="ui/css/bootstrap.min.css">
    <link rel="stylesheet" href="ui/css/bootstrap-theme.min.css">
    <script src="ui/js/bootstrap.min.js"></script>
    <style type="text/css">
        * { margin: 0px; padding: 0px; }

        body, button, input, select, textarea {margin: 0;padding: 0; font: 12px/16px Verdana, Helvetica, Arial, sans-serif; }

        #container { min-width: 600px; min-height: 900px; z-index: 999; }

        .school_name { font-size: 20px; margin: 0; color: #930; }

        #container h1 { position: relative; top: 20px; width:420px; font-size: 20px; height: 40px; line-height: 40px; text-align: center; margin: 0 auto 10px auto;z-index: 9999; background: url(img/ver.png);color: #FFF; }

        .data_box { width: 220px; height: 400px; position: absolute; right: 10px; top: 120px; background: url(img/ver.png); z-index: 9999; border-radius: 10px; }

        .data_box h2 { height: 40px; line-height: 40px; color: #FFF; font-size: 20px; }

        .data_conn { width: 190px; margin: 0 auto; color: #FFF;}

        .data_conn img { width: 24px; height: 24px; margin-right: 10px;}

        .table-bordered { border: #39F !important;}

        .dongtai{
            display: flex;
            flex-direction: column;
            min-width: 0;
            word-wrap: break-word;
            background: url(img/ver.png);
            height: 35em;
            background-clip: border-box;
            border-radius: .25rem;
            border-width: 0;
            border-radius: 0.4rem;
            box-shadow: 0 2px 6px 0 rgba(114, 124, 245, .5);
            position: fixed;
            top: 11rem;
            left: 5.5rem;
            -ms-flex: 1 1 auto;
            flex: 1 1 auto;
            padding: 0.5rem 1.25rem;
            z-index: 8888;
            width: 50rem;
            color: #fff;
            overflow-y: scroll;
        }

    </style>
    <script charset="utf-8" src="https://map.qq.com/api/js?v=2.exp&key=IYNBZ-YNYWG-IE6QE-IQPNJ-J3HKV-BVBTX"></script>
    <!-- 开发环境版本，包含了有帮助的命令行警告 -->
    <script src="/admin/js/vue.js"></script>


</head>
<body>

<div id="container">
    <h1><?php echo $cfg_webname; ?></h1>
    <div class="data_box">
        <h2>数据概况：</h2>
        <div id="dongtai" class="dongtai">
            <div class="tit">人员动态</div>
            <div class="dongtai_box" id="dongtai_box">

            </div>
        </div>
        <div class="data_conn">
            <table class="table table-bordered">
                <tr>
                    <td width="120"><img src="img/1.gif">报修成功</td>
                    <td width="70">{{datas.count.apply}}</td>
                </tr>

                <tr>
                    <td><img src="img/3.png">已派单</td>
                    <td>{{ datas.count.waiting }}</td>
                </tr>
                <tr>
                    <td><img src="img/4.png">工程师接单</td>
                    <td>{{ datas.count.rev }}</td>
                </tr>
                <tr>
                    <td><img src="img/qian.gif">工程师签到</td>
                    <td>{{ datas.count.doing }}</td>
                </tr>
                <tr>
                    <td><img src="img/5.png">维修完成</td>
                    <td>{{ datas.count.ok }}</td>
                </tr>
                <tr>
                    <td>所有工单</td>
                    <td>{{ datas.count.all }}</td>
                </tr>
            </table>
            <div class=""><kbd> 注意:</kbd> 报修完成的工单较多，不在地图上展示。</div>
        </div>
    </div>
</div>



<script type="text/javascript">


    //工单查看
    function dongdanshow(id){
        //iframe窗
        layer.open({
            skin: 'layui-layer-molv', //样式类名
            type: 2,
            title: '工单详情',
            shadeClose: true,
            shade: false,
            //maxmin: true, //开启最大化最小化按钮
            area: ['893px', '600px'],
            content: ['ordershow.php?id='+id], //iframe的url，no代表不显示滚动条

        });
    }


    //工单查看
    function projectshow(id){
        //iframe窗
        layer.open({
            skin: 'layui-layer-molv', //样式类名
            type: 2,
            title: '工单详情',
            shadeClose: true,
            shade: false,
            //maxmin: true, //开启最大化最小化按钮
            area: ['893px', '600px'],
            content: ['projectDetail.php?id='+id], //iframe的url，no代表不显示滚动条

        });
    }

    $(function () {
        //初始化地图
        center = new qq.maps.LatLng(32.976950, 114.037510);
        map = new qq.maps.Map(document.getElementById("container"), {
            center: center,
            zoom: 13,
        });
        markersArray = []
        labelsArray = []
    });




    var vm = new Vue({
        el: '#container',
        data: {
            datas: {
                count: {all: 0,apply:0,rev:0, doing: 0, waiting: 0, ok: 0},
                map: []
            },
            timer: null
        },
        methods: {
            setTimer: function () {
                console.log('开始定时...111')
                if (this.timer == null) {
                    this.timer = setInterval(() => {
                        console.log('开始定时...每过3秒执行一次')

                        $.ajax({
                            type: 'POST',
                            url: "daping/data_map.php",
                            data: {time: Date.parse(new Date())},
                            dataType: 'JSON',
                            success: function (result) {
                                console.log(result);
                                if (result.errno == 0) {
                                    vm.datas = result.data;
                                    console.log(vm.datas);
                                    vm.$forceUpdate();
                                    $("#dongtai_box").html(result.data.dongtai);
                                    getData();
                                }
                            }
                        })
                    }, 3000)
                }
            }
        },
        created: function () {
            console.log('开始定时...000');
            $.ajax({
                type: 'POST',
                url: "daping/data_map.php",
                data: {time: Date.parse(new Date())},
                dataType: 'JSON',
                success: function (result) {
                    console.log(result);
                    if (result.errno == 0) {
                        vm.datas = result.data;
                        console.log(vm.datas);
                        vm.$forceUpdate();
                        $("#dongtai_box").html(result.data.dongtai);
                        getData();
                    }
                }
            })
            //this.getFamilyBase_info()
            // 每次进入界面时，先清除之前的所有定时器，然后启动新的定时器
            clearInterval(this.timer)
            this.timer = null
            this.setTimer()
        },
        destroyed: function () {
            // 每次离开当前界面时，清除定时器
            clearInterval(this.timer)
            this.timer = null
        }

    })



    //加载数据
    function getData() {
        var cssC = {
            color: "#fff",
            fontSize: "14px",
            fontWeight: "bold",
            border:"none",
            background: "rgba(25, 25, 25, 0.7)",
            padding:"5px"

        };

        /*map*/
        if (markersArray) {
            for (i in markersArray) {
                markersArray[i].setMap(null);
            }
        }
        if (labelsArray) {
            for (i in labelsArray) {
                labelsArray[i].setMap(null);
            }
        }
        var anchor = new qq.maps.Point(6, 6),
            size = new qq.maps.Size(32, 32),
            origin = new qq.maps.Point(0, 0);
        var map_data = vm.datas.map;


        var infoWin = new qq.maps.InfoWindow({
            map: map
        });

        for (var i = 0; i < map_data.length; i++) {
            var data_pos = map_data[i].latlngs;
            var oder_info = map_data[i].oder_info;
            var latLng = eval(new qq.maps.LatLng(map_data[i].lat, map_data[i].lng));
            //var latLng = new LatLng(33.006170,114.015880);
             markersArray[i] = new qq.maps.Marker({
                position: latLng,
                map: map,
                icon: new qq.maps.MarkerImage('img/' + map_data[i].jindu + '.gif', size, origin, anchor),
                 extData: oder_info,
                 latLng:latLng
            });
            //markersArray.push(marker);

             labelsArray[i] = new qq.maps.Label({
                position:  latLng,
                map: map,
                content: map_data[i].manageids,
                offset: new qq.maps.Size(-25, 20),
                style: cssC
            });
            //labelsArray.push(label);

            qq.maps.event.addListener(markersArray[i], 'click', function (e) {
                console.log(e);
                console.log(e.target);
                var oder_info=e.target.extData;
                var latLng=eval(e.target.latLng);
                infoWin.open();
                infoWin.setContent(oder_info);
                infoWin.setPosition(latLng);
            });

        }
        /*map*/





    }


</script>


</body>
</html>
